<template>
  <div class="app">
    <div class="tab-wrap">
      <div class="tab-item" v-for="(item, index) of dataList" @click="curIndex = index" :key="index">
        {{ item.tab }}
      </div>
      <div class="toggle-wrap">
        <div class="tab-item" @click="buttonStatus = 'prev'">上一页</div>
        <div class="tab-item" @click="buttonStatus = 'next'">下一页</div>
      </div>
    </div>
    <div class="list-wrap">
      <scroll-wrap 
        :dataList="dataList"
        :propIndex="curIndex"
        :propDelay="1000" 
        :buttonStatus="buttonStatus"
      >
        <template #scrollItem="itemProps">
          {{ itemProps }}
        </template>
      </scroll-wrap>
    </div>
  </div>
</template>

<script>
  import ScrollWrap from './components/ScrollWrap/index.vue';
  
  export default {
    components: {
      ScrollWrap
    },
    data() {
      return {
        dataList: [],
        curIndex: 0,  //  记录当前是第几个元素
        buttonStatus: ''
      }
    },
    created() {
      setTimeout(() => {
        this.dataList =  [
          { id: 1, text: '文本1', tab: '文本1' },
          { id: 2, text: '文本2', tab: '文本2' },
          { id: 3, text: '文本3', tab: '文本3' },
          { id: 4, text: '文本4', tab: '文本4' },
          { id: 5, text: '文本5', tab: '文本5' },
          { id: 6, text: '文本6', tab: '文本6' },
          { id: 7, text: '文本7', tab: '文本7' },
          { id: 8, text: '文本8', tab: '文本8' },
        ];
      }, 1000);
    },
    methods: {
      handlePrev(ev) {},
      handleNext(ev) {}
    }
  }
</script>

<style scoped>
  .app {
    display: flex;
    height: 100vh;
  }

  .tab-wrap {
    width: 300px;
    height: 100%;
    background-color: yellowgreen;
  }

  .tab-item {
    text-align: center;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    border: 1px solid red;
  }

  .list-wrap {
    flex: 1;
    height: 100%;
    text-align: center;
    font-size: 24px;
  }

  .list-item {
    height: 100%;
    border: 1px solid red;
    box-sizing: border-box;
  }
</style>
